<template>
  <div class="home-right">
    <div class="home-right-todo">
      <el-card>
        <template #header>
          <div class="todo-header">
            <span class="header-title">
              我的待办
              <el-tag type="danger" effect="light" round>{{ total }}</el-tag>
            </span>
            <el-button class="header-more" text @click="goProblemLib()">查看更多>>></el-button>
          </div>
        </template>
        <ul class="todo-list">
          <li v-for="(item, index) in myUpcomingListData" :key="index">
            <div class="list-title">
              <div class="list-title-info">
                <span class="color-primary">{{ item.fillUserName }} </span>提问
                <span class="color-primary">{{ item.projectName }}</span>
              </div>
              <div class="list-title-date">{{ item.fillTime }}</div>
            </div>
            <div class="list-body">
              <div class="list-desc">问题: {{ item.describes }}</div>
              <el-button class="header-more" round type="primary" @click="goProblemDetail(item.id)"
                >待处理>></el-button
              >
            </div>
          </li>
          <el-button class="header-more" text @click="goProblemLib()">查看更多>>></el-button>
        </ul>
      </el-card>
    </div>
    <div class="home-right-dynamic">
      <el-card>
        <template #header>
          <div class="todo-header">
            <span class="header-title"> 最新动态 </span>
          </div>
        </template>
        <el-timeline class="dynamic-list">
          <el-timeline-item timestamp="2018/4/3" placement="top" type="primary" :hollow="true">
            <el-card> 张三创建了项目 某某某 </el-card>
          </el-timeline-item>
          <el-timeline-item timestamp="2018/4/3" placement="top" type="primary" :hollow="true">
            <el-card> 张三创建了项目 某某某 </el-card>
          </el-timeline-item>
          <el-timeline-item timestamp="2018/4/3" placement="top" type="primary" :hollow="true">
            <el-card> 张三创建了项目 某某某 </el-card>
          </el-timeline-item>
          <el-timeline-item timestamp="2018/4/3" placement="top" type="primary" :hollow="true">
            <el-card> 张三创建了项目 某某某 </el-card>
          </el-timeline-item>
          <el-timeline-item timestamp="2018/4/3" placement="top" type="primary" :hollow="true">
            <el-card> 张三创建了项目 某某某 </el-card>
          </el-timeline-item>
        </el-timeline>
      </el-card>
    </div>
  </div>
</template>
<script setup lang="ts">
  // import { myUpcomingList } from '@/api/problemManage'
  import { reactive, ref, onMounted } from 'vue'
  import { useRouter, useRoute } from 'vue-router'
  const router = useRouter()
  const route = useRoute()
  //问题列表
  const myUpcomingListData = ref([])
  const total = ref(0)
  //问题列表接口
  // async function projectManagerList() {
  //   let params = {
  //     page: page.value,
  //     size: size.value,
  //   }
  //   if (dateRange.value) {
  //     params[startDate] = dateRange.value[0]
  //     params[endDate] = dateRange.value[1]
  //   }
  //   if (form.projectName) {
  //     params[projectName] = form.projectName
  //     console.log(params)
  //   }

  //   if (form.projectStatus) {
  //     params[projectStatus] = form.projectStatus
  //   }
  //   const [err, response] = await pageList(params)
  //   if (response.success === true) {
  //     tableData.value = response.data.rows
  //     total.value = response.data.total
  //   }
  // }
  //人员列表接口
  async function getMyUpcomingList() {
    // const [err, response] = await myUpcomingList()
    // if (response.success === true) {
    //   myUpcomingListData.value = response.data.rows
    //   total.value = response.data.total
    //   console.log(myUpcomingListData)
    // }
  }
  const goProblemLib = () => {
    router.push({
      path: '/problem/index',
      query: {
        type: 2,
      },
    })
  }
  const goProblemDetail = (problemId) => {
    router.push({
      path: '/problem/problemDetail',
      query: {
        id: problemId,
      },
    })
  }
  onMounted(() => {
    getMyUpcomingList()
  })
</script>
<style scoped lang="scss">
  .home-right {
    display: flex;
    height: 100%;
    width: 100%;
    flex-direction: column;
    justify-content: space-between;
    :deep(.el-card__body) {
      padding: 0;
      height: 100%;
    }
    :deep(.el-card__header) {
      padding: 0 0 10px 0;
    }
    .todo-header {
      font-size: 20px;
      font-weight: bold;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      :deep(.el-tag) {
        padding: 0 15px;
        font-size: 16px;
      }
      .header-more {
        font-size: 12px;
        color: #ccc;
      }
      :deep(.el-button) {
        padding: 0;
        height: auto;
      }
    }
    .home-right-todo {
      flex: 1;
      margin-bottom: 10px;
      max-height: 50%;
      .todo-list {
        list-style: none;
        font-size: 14px;
        padding: 0 10px;
        height: 100%;
        overflow: auto;
        .color-primary {
          color: var(--el-color-primary);
          font-weight: bold;
          font-size: 17px;
        }
        :deep(.el-button) {
          font-size: 14px;
          padding: 6px 10px;
          height: auto;
        }
        & > li {
          padding: 10px 0;
          &:not(:last-of-type) {
            border-bottom: 1px solid #eee;
          }
        }
        .list-title,
        .list-body {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;
        }
        .list-title {
          padding-bottom: 5px;
        }
        .list-title-date {
          font-size: 14px;
          color: #ccc;
        }
      }
      .list-desc {
        width: 70%;
        overflow: hidden;
        white-space: nowrap;
        word-break: break-all;
        text-overflow: ellipsis;
      }
    }
    .home-right-todo,
    .home-right-dynamic {
      :deep(.el-card__header) {
        max-height: 40px;
      }
      :deep(.el-card__body) {
        height: calc(100% - 40px);
      }
    }
    .home-right-dynamic {
      flex: 1;
      max-height: calc(50% - 10px);
      .dynamic-list {
        height: 100%;
        overflow: auto;
        padding: 10px;
      }
    }
  }
</style>
